<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<!-- jquery Mobile -->
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="./css/scroll.css" />
		<link rel="stylesheet" href="css/style.css" />
		<title>21.订单页面</title>
		<script>$.mobile.ajaxEnabled = false;</script>
	</head>
	<body>
		<div data-role="page" class="bg01">
			<div data-role="header" data-position="fixed" id="opcitybg">
				<a id="headop" href="c_personal.html" data-role="button" data-icon="user" data-iconpos="notext"></a>
				<h1>订单页面</h1>
				<a id="headop" href="c_productList.html" data-role="button" data-icon="search"
					data-iconpos="notext"></a>
			</div>
			
			<div data-role="main" class="ui-content">
				<form method="post" action="demoform.asp">
					<label for="fname">收货人：</label>
					<input type="text" name="fname" id="fname" data-clear-btn="true">
					<label for="fname">联系方式：</label>
					<input type="text" name="fname" id="fname" data-clear-btn="true">
					<div class="weui-cell weui-cell_select weui-cell_select-after">
					    <div class="weui-cell__hd">
					        <label for="" class="weui-label">地区</label>
					    </div>
					    <div class="weui-cell__bd">
					        <input class="weui-input" type="text" id="selectArea" name="city" placeholder="请输入所在地区" readonly>
					    </div>
					</div>
				    <form method="post" action="demoform.php">
				    	<div class="ui-field-contain">		
				    	    <label for="info">详细地址:</label>
				    	    <textarea name="addinfo" id="info" type="text" name="userName" id="userName" placeholder="请输入至少15个字"></textarea>
				    	</div>
				    </form>  
					  <label for="fname">请选择付款方式</label>
					  <select name="value" id="value" >
					      <option value="electron">支付宝</option>
					      <option value="paper">微信支付</option>
					      <option value="cosmetic">银联</option>
					      <option value="daily">信用卡</option>
					  </select>
				    </form>
			</div>
			
			<div data-role="footer" id="pay" data-position="fixed" >
				<div data-role="navbar">
					<ul>
						<li><a href="s_product_details.html" >取消订单</a></li>
						<li><a href="s_Pay_1.html" >立即支付</a></li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/weui.min.js"></script>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/city.js"></script>
		<script>
		    $(function () {
		        // 点击所在地区
		        $('#selectArea').on('click', function () {
		            // 地址三级联动
		            weui.picker(cityData3, {
		                defaultValue: ["110000", "110100", "110101"],
		                onConfirm: function (result) {
		                    var str = "";
		                    var cityArr = [];
		                    result.map(function (i, val) {
		                        str += i["label"] + ' ';
		                        cityArr.push(i["value"]);
		                    });
		                    $("#selectArea").val(str);
		                    $("#selectArea").attr("cityArr", cityArr);
		                }
		            })
		        });
		    })
		</script>
	</body>
</html>
